import dash_bootstrap_components as dbc
from dash import html, dcc
big_modal = dbc.Modal(
    [
        # 右上角关闭按钮
        html.Button(
            "关闭",
            id="close-big-modal",
            n_clicks=0,
            style={
                "position": "absolute",
                "top": "18px",
                "right": "38px",
                "fontSize": "32px",
                "background": "none",
                "border": "none",
                "color": "#fff",
                "cursor": "pointer",
                "zIndex": 10001
            }
        ),
        dbc.ModalBody(
            dcc.Graph(
                id='big-modal-graph',
                figure=None,
                style={
                    'width': '1400px',  
                    'height': '800px',
                    'margin': '100px'
                },
                config={'responsive': True, 'displayModeBar': False}
            ),
            style={
                "height": "100%",
                "width": "100%",
                "borderRadius": "15px",
                "overflow": "hidden",
                "display": "flex",
                "flexDirection": "column",
                "justifyContent": "flex-start",
                "alignItems": "center",
                "padding": "10",
                "margin": "10"
            }
        ),
    ],
    id='big-graph-modal',
    is_open=False,
    backdrop=True,
    centered=False,
    size="xl",
    style={
        "borderRadius": "16px",
        "height": "calc(100vh - 350px)",
        "width": "calc(100vw - 400px)",
        "height": "100%",
        "width": "100%",
        "boxShadow": "0 8px 32px 0 rgba(10,39,64,0.35)",
        "background": "#001f36",
        "position": "absolute",
        "margin": "150"
    }
)